<template>
	<div>
		<div class="title">推荐歌单</div>
		<van-row gutter="10" >
			<!-- 遍历渲染 -->
        <van-col span="8" v-for="item in reList" :key="item.id">
			<van-image
              width="100%"
              height="3rem"
              fit="cover"
              :src="item.picUrl"
            />
			<p class="song_name">{{ item.name }}</p>
		</van-col>
        </van-row>

		<!-- <div class="title">最新音乐</div>
		<van-cell :title="item2.name"  :label="item2.song.artists[0].name + '--' + item2.name " center v-for="item2 in newList" :key="item2.id"> -->
			
		 <!-- 使用 right-icon 插槽来自定义右侧图标 -->
		 <!-- <template #right-icon>
           <van-icon name="play-circle-o" size="0.6rem"/>
         </template>
	    </van-cell> -->

		<!-- 使用封装的SongItem组件 -->
		<SongItem 
		v-for="item2 in newList" 
		:key="item2.id"
		:title="item2.name"
		:label="item2.song.artists[0].name"
		:id="item2.id"
		>
		</SongItem>
	</div>
</template>

<script>
// 导入api/index.js
import { newSong, recommendMusic } from '@/api' //默认找到api/index
import SongItem from '@/components/SongItem.vue'
	export default {
		data() {
			return {
				reList:[],
				newList:[]
			}
		},
		components:{SongItem},
		async created(){
			const {data:res} = await recommendMusic({limit:6})
			console.log(res);
			this.reList = res.result

			// 推荐新音乐
			const {data:res2} = await newSong({limit:7})
			console.log(res2);
			this.newList = res2.result
		}
	}
</script>

<style scoped>
	/* 标题 */
	.title {
		padding: 0.266667rem 0.24rem;
		margin: 0 0 0.24rem 0;
		background-color: #eee;
		color: #333;
		font-size: 15px;
	}

	/* 推荐歌单 - 歌名 */
	.song_name {
		font-size: 0.346667rem;
		padding: 0 0.08rem;
		margin-bottom: 0.266667rem;
		line-height: 1.5;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
	}
</style>
